<template>
  <div id="scene">
    <div id="offsetBtn" style="top: -40%">
      x:
      <input type="number" id="xValue" v-on:change="xValueChange" />
      <br />y:
      <input type="number" id="yValue" v-on:change="yValueChange" />
      <br />
      比例：
      <input type="number" id="enlargeChange" v-on:change="enlargeChange" />
      <br />
      <button v-on:click="xBtn">x翻转</button>
      <br />
      <button v-on:click="yBtn">y翻转</button>
      <br />
      <button v-on:click="xyChangeBtn">x-y互调</button>
      <br />
      <!-- 人物大小:<input type="number" step="0.2" id="peopleSize" v-on:change="peopleSize" /><br /> -->
      <button v-on:click="positionUpdate">确认</button>
    </div>
    <div class="bottom_btn">
      <div class="gd_point">
        <el-select
          v-model="nowScene"
          placeholder="请选择场景"
          @change="scene_changes"
          style="z-index: 999"
        >
          <el-option
            style="z-index: 999"
            v-for="item in scene_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="pt_point">
        <el-select
          v-model="all_value"
          placeholder="请选择"
          @change="changes"
          style="z-index: 999"
        >
          <el-option
            style="z-index: 999"
            v-for="item in all_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <!-- <div class="jc_point">
        <el-select v-model="jc_value" placeholder="请选择" @change="jc_changes">
          <el-option
            v-for="item in jc_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>-->
    </div>
    <!-- <div v-if="measureInfoShow" class="measure_info_big">
      <div class="measure_info">
        <h1>
          测量设备：
          <b>{{boxdata.celiang}}</b>
        </h1>
        <h1>
          x偏移量：
          <b>{{boxdata.x}}</b>
        </h1>
        <h1>
          y偏移量：
          <b>{{boxdata.y}}</b>
        </h1>
        <h1>
          z偏移量：
          <b>{{boxdata.z}}</b>
        </h1>
        <div class="button_box" @click="getLineData(boxdata.did)">
          <p>查看详情</p>
        </div>
      </div>
    </div>-->
    <!-- 折线图 -->
    <div v-if="lineShow" class="line-box">
      <p class="cha_name">设备{{ boxdata.did }}--{{ type }}</p>
      <p class="cha" @click="lineShow = false;all_value=[]">×</p>
      <div class="content">
        <el-form :inline="true" label-position="left">
          <el-form-item>
            <el-switch
              v-model="bigObject.switchButton"
              active-text="定时刷新"
            />
            <el-switch
              v-model="bigObject.num"
              style="margin-left: 30px"
              active-text="偏移量"
              inactive-text="距离量"
            />
          </el-form-item>
          <el-form-item>
            <el-button autofocus="true" size="small" @click="type = 'x'"
              >显示x</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="type = 'y'">显示y</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="type = 'z'">显示z</el-button>
          </el-form-item>
          <el-date-picker
            v-model="bigObject.timeSel"
            value-format="yyyy/MM/dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getLineData()"
          />
        </el-form>
        <line-chart
          v-if="bigObject.data.xvos.length"
          :groupId="bigObject.groupId"
          :data="bigObject.data"
          :time="bigObject.timeSel"
          :num="bigObject.num"
          :name="bigObject.name"
          index="1"
          :height="windowHeight"
          width="95%"
          :type="type"
        />
        <div v-if="!bigObject.data.xvos.length" class="simpleText">
          您查询的此时间段暂无数据！！
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import {
  getOffsetScene,
  putOffsetScene,
  position,
  getSceneList,
  getDevice_byType,
  getNew_offset,
  getXyz,
} from "@/api/scene";
const TWEEN = require("@tweenjs/tween.js");
import LineChart from "./components/LineChart1";
import { parseTime } from "@/utils/index";
import { searchLine, getMeasureList } from "@/api/dashboard";
export default {
  components: {
    LineChart,
  },
  watch: {
    "bigObject.switchButton"(n) {
      this.int = n;
    },
    int(n) {
      if (n) {
        this.i = setInterval(() => {
          this.getLineData(this.boxdata.did);
        }, 5000);
      } else {
        clearInterval(this.i);
      }
    },
  },
  data() {
    return {
      // measureGroup: null,
      nowScene: null,
      measureInfoShow: false,
      lineShow: false,
      bigObject: {},
      windowHeight: window.innerHeight * 0.8 - 300 + "px",
      nowGroupId: "",
      autofocus: true,
      boxdata: {
        celiang: "",
        pianyi: "",
        x: "",
        y: "",
        z: "",
        did: "",
      },
      type: "x",
      sceneFlag: true,
      int: null,
      api: [
        // {
        //   name: "固定点1121",
        //   index: 1,
        //   type: 2,
        //   now_position: { x: 50, y: 0, z: 100 },
        // },
        // {
        //   name: "监测点1122",
        //   index: 2,
        //   type: 0,
        //   old_position: { x: -100, y: 0, z: -100 },
        //   now_position: { x: -50, y: 0, z: -100 },
        // },
        // {
        //   name: "监测点1123",
        //   index: 3,
        //   type: 0,
        //   old_position: { x: -20, y: 0, z: -20 },
        //   now_position: { x: 50, y: 0, z: 30 },
        // },
      ],
      // group: [
      //   {
      //     dian1: id,
      //     dian2: id,
      //     pianyi: 0.55
      //   },
      //   {
      //     dian1: id,
      //     dian2: id,
      //     pianyi: 0.55
      //   },
      //   {
      //     dian1: id,
      //     dian2: id,
      //     pianyi: 0.55
      //   }
      // ],
      all_options: [
        // {
        //   value: "all_1",
        //   label: "固定点1121: 0.65mm",
        //   position: { x: 50, y: 0, z: 100 },
        // },
        // {
        //   value: "all_2",
        //   label: "监测点1122: -0.25mm",
        //   position: { x: -50, y: 0, z: -100 },
        // },
        // {
        //   value: "all_3",
        //   label: "监测点1123: -0.25mm",
        //   position: { x: 50, y: 0, z: 30 },
        // },
      ],
      scene_options: [],
      jc_options: [
        {
          value: "all",
          label: "全部",
          options: [
            {
              value: "all_1",
              label: "固定点1121: 0.65mm",
              position: { x: 50, y: 0, z: 100 },
            },
            {
              value: "all_2",
              label: "监测点1122: -0.25mm",
              position: { x: -50, y: 0, z: -100 },
            },
            {
              value: "all_3",
              label: "监测点1123: -0.25mm",
              position: { x: 50, y: 0, z: 30 },
            },
          ],
          change_value: "",
        },
        {
          value: "jc_1",
          label: "监测组1",
          options: [
            {
              value: "all_1",
              label: "固定点1121: 0.65mm",
              position: { x: 50, y: 0, z: 100 },
            },
            {
              value: "all_2",
              label: "监测点1122: -0.25mm",
              position: { x: -50, y: 0, z: -100 },
            },
          ],
          change_value: "",
        },
        {
          value: "jc_2",
          label: "监测组2",
          options: [
            {
              value: "all_1",
              label: "固定点1123: 0.33mm",
              position: { x: 50, y: 0, z: 30 },
            },
            {
              value: "all_2",
              label: "监测点1122: -0.90mm",
              position: { x: -50, y: 0, z: -100 },
            },
          ],
          change_value: "",
        },
      ],
      all_value: "",
      jc_value: "all",
      measureList: [],
      xval: 0,
      yval: 0,
      xyChange: 1,
      xfz: 1,
      yfz: 1,
      enlarge: 1,
    };
  },
  created() {
    this.putId = null;
  },
  mounted() {
    this.init();
    this.animate();
    document.body.style.overflow = "hidden";
    this.getSceneData();
    setTimeout(() => {
      this.nowScene = this.scene_options[0].value;
      this.getOffsetSceneData(); //偏移量
      this.getPosition();
      this.getAllLabel();
      this._loadModal(this.nowScene);
    }, 1000);
    window.addEventListener("keydown", this.onKeyDown, false);
  },
  methods: {
    getAllLabel() {
      //所有标签点
      getDevice_byType({ sceneId: this.nowScene }).then((res) => {
        if (res.ok) {
          let a = [];
          res.data.forEach((it) => {
            let offsetdata = this.offsetChange(it.x, it.y);
            a.push({
              value: it.id,
              label: it.name,
              did: it.did,
              position: {
                x: Number(offsetdata[0]) / 1000,
                y: Number(it.z) / 1000,
                z: Number(offsetdata[1]) / 1000,
              },
            });
          });
          this.all_options = a;
        }
      });
    },
    getOffsetSceneData() {
      getOffsetScene(this.nowScene).then((res) => {
        if (res.ok) {
          console.log(res);
          this.putId = res.data.id;
          let data = JSON.parse(res.data.offset);
          if (data.xval) {
            this.xval = data.xval;
            this.yval = data.yval;
            this.xyChange = data.xyChange;
            this.xfz = data.xfz;
            this.yfz = data.yfz;
            this.enlarge = data.enlarge;
            document.querySelector("#xValue").value = this.xval;
            document.querySelector("#yValue").value = this.yval;
            document.querySelector("#enlargeChange").value = this.enlarge;
          }
        }
      });
    },
    offsetChange(x, y) {
      // console.log('change111', xyChange)
      if (this.xyChange === 1) {
        //     console.log('change111aanfz', xyChange)
        return [
          Number(this.xfz * x) * this.enlarge+ Number(this.xval) ,
          Number(this.yfz * y) * this.enlarge + Number(this.yval)
        ];
      } else {
        //    console.log('change111bbfz', xyChange)
        return [
          Number(this.xfz * y) * this.enlarge+ Number(this.xval) ,
          Number(this.yfz * x) * this.enlarge + Number(this.yval)
        ];
      }
    },
    positionUpdate() {
      let scene = {
        xval: document.querySelector("#xValue").value || 0,
        yval: document.querySelector("#yValue").value || 0,
        xfz: this.xfz,
        yfz: this.yfz,
        xyChange: this.xyChange,
        enlarge: this.enlarge,
      };
      putOffsetScene({
        sceneId: this.nowScene,
        id: this.putId,
        offset: JSON.stringify(scene),
      });
      document.querySelector("#offsetBtn").style.top = "-40%";
      // window.location.reload()
      setTimeout(() => {
        this.scene_changes(this.nowScene);
      }, 500);
    },
    xBtn() {
      this.xfz = this.xfz * -1;
    },
    yBtn() {
      this.yfz = this.yfz * -1;
    },
    xyChangeBtn() {
      this.xyChange *= -1;
    },
    xValueChange() {
      let xValueOffset = document.querySelector("#xValue");
      this.xval = xValueOffset.value;
    },
    yValueChange() {
      let yValueOffset = document.querySelector("#yValue");
      this.yval = yValueOffset.value;
    },
    enlargeChange() {
      let enlargeNum = document.querySelector("#enlargeChange");
      this.enlarge = enlargeNum.value;
    },
    async removeAll() {
      let removedata = [];
      await this.scene.children.forEach((it) => {
        if (
          it.name.split("_")[0] === "oldPoint" ||
          it.name.split("_")[0] === "nowPoint"
        ) {
          removedata.push(it);
        }
      });
      removedata.forEach((item) => {
        this.scene.remove(item);
      });
    },
    scene_changes(n) {
        if (document.querySelectorAll(".Point")) {
          document.querySelectorAll(".Point").forEach((item) => {
            document.body.removeChild(item);
          });
        }
        if (this.scene.getObjectByName("sceneSelect")) {
          this.scene.remove(this.scene.getObjectByName("sceneSelect"));
        }
        this.removeAll();
        this.measureInfoShow = false;
        this.nowScene = n;
        this.all_value = [];
        this.scene_options = [];
        this.jc_value = [];
        this.getSceneData();
        this.getOffsetSceneData();
        setTimeout(() => {
          this.getPosition();
          this.getAllLabel();
          this._loadModal(this.nowScene);
        }, 500);
    },
    getSceneData() {
      getSceneList().then((res) => {
        if (res.ok) {
          if (res.data.length) {
            res.data.forEach((it) => {
              this.scene_options.push({
                value: it.id,
                label: it.name,
              });
            });
          }
        }
      });
    },
    searchMeasureList(data) {
      let num_id = null;
      this.measureList.forEach((it) => {
        if (
          Number(it.tranId) === Number(data[0]) &&
          Number(it.receId) === Number(data[1])
        ) {
          num_id = it.id;
        }
      });
      return num_id;
    },
    getPosition() {
      position({ sceneId: this.nowScene }).then((res) => {
        if (res.ok) {
          res.data.forEach((item) => {
            if (item.newPo) {
              let offsetdata = this.offsetChange(item.newPo.x, item.newPo.y);
              item.newPo.x = offsetdata[0];
              item.newPo.y = item.newPo.z;
              item.newPo.z = offsetdata[1];
              // let newy = item.newPo.y;
              // item.newPo.y = item.newPo.z;
              // item.newPo.z = newy;
              item.newPo.x /= 1000;
              item.newPo.y /= 1000;
              item.newPo.z /= 1000;
            }
            if (item.oldPo) {
              let offsetdata = this.offsetChange(item.oldPo.x, item.oldPo.y);
              item.oldPo.x = offsetdata[0];
              item.oldPo.y = item.oldPo.z;
              item.oldPo.z = offsetdata[1];
              // let newy = item.oldPo.y;
              // item.oldPo.y = item.oldPo.z;
              // item.oldPo.z = newy;
              item.oldPo.x /= 1000;
              item.oldPo.y /= 1000;
              item.oldPo.z /= 1000;
            }
          });
          let a = this.createApi(res.data);
          this.api = a[0];
          this.createPoint();
          // this.all_options = a[1];
          // this.getOffset();
        }
      });
    },
    createApi(data) {
      let api = [];
      let all_options = [];
      data.forEach((item, index) => {
        if (item.newPo) {
          item.newPo.x = Number(item.newPo.x);
          item.newPo.y = Number(item.newPo.y);
          item.newPo.z = Number(item.newPo.z);
        }
        if (item.oldPo) {
          item.oldPo.x = Number(item.oldPo.x);
          item.oldPo.y = Number(item.oldPo.y);
          item.oldPo.z = Number(item.oldPo.z);
        }
        if (item.type === 0) {
          if (item.newPo === null) {
            item.newPo = item.oldPo;
          }
        }
        api.push({
          name: item.name,
          id: item.id,
          type: item.type,
          now_position: item.newPo,
          old_position: item.oldPo,
        });
        all_options.push({
          value: `all_${index}`,
          label: item.name,
          position: item.newPo,
        });
      });
      let a = [api, all_options];
      return a;
    },
    createPoint() {
      this.nPoint();
      this.oPoint();
    },
    changes(n) {
      this.all_options.forEach((item) => {
        if (item.value === n) {
            this.controls.target = new THREE.Vector3(
              item.position.x,
              item.position.y,
              item.position.z
            );
            this.measureInfoShow = true;
            // this.getNewOffset(item.did);
            this.boxdata.celiang = item.label;
            this.camera.position.set(item.position.x, 250, item.position.z);
            this.controls.update();
            this.boxdata.did = item.did;
            this.getLineData(this.boxdata.did);
          
        }
      });
    },
    getNewOffset(dataId) {
      getNew_offset({ deviceDid: dataId }).then((res) => {
        if (res.ok) {
          res.data.positionX.split("-")[0] === "0E"
            ? (res.data.positionX = 0)
            : null;
          res.data.positionY.split("-")[0] === "0E"
            ? (res.data.positionY = 0)
            : null;
          res.data.positionZ.split("-")[0] === "0E"
            ? (res.data.positionZ = 0)
            : null;
          this.boxdata.x = res.data.positionX + "mm";
          this.boxdata.y = res.data.positionY + "mm";
          this.boxdata.z = res.data.positionZ + "mm";
        }
      });
    },
    nPoint() {
      this.api.forEach((item) => {
        if (item.type === 2) {
          let geometry = new THREE.SphereBufferGeometry(1, 32, 32);
          let material = new THREE.MeshBasicMaterial({ color: "gray" });
          let sphere = new THREE.Mesh(geometry, material);
          sphere.position.set(
            item.now_position.x,
            item.now_position.y,
            item.now_position.z
          );
          sphere.name = "nowPoint_" + item.id;
          this.scene.add(sphere);
          this.initText("nowPoint_", item);
        } else if (item.type === 0) {
          if (item.now_position === null) {
            item.now_position = item.old_position;
          }
          let geometry = new THREE.SphereBufferGeometry(1, 32, 32);
          let material = new THREE.MeshBasicMaterial({ color: "orange" });
          let sphere = new THREE.Mesh(geometry, material);
          sphere.position.set(
            item.now_position.x,
            item.now_position.y,
            item.now_position.z
          );
          sphere.name = "nowPoint_" + item.id;
          this.scene.add(sphere);
          this.initText("nowPoint_", item);
        }

        // this.changes(this.all_options[0].value);
      });
    },
    oPoint() {
      this.api.forEach((item) => {
        if (item.type === 0) {
          let geometry = new THREE.SphereBufferGeometry(1, 32, 32);
          let material = new THREE.MeshBasicMaterial({ color: "green" });
          let sphere = new THREE.Mesh(geometry, material);
          sphere.position.set(
            item.old_position.x,
            item.old_position.y,
            item.old_position.z
          );
          sphere.name = "oldPoint_" + item.id;
          this.scene.add(sphere);
          this.initText("oldPoint_", item);
          var position = {
            x: item.old_position.x,
            y: item.old_position.y,
            z: item.old_position.z,
          };
          var target = {
            x: item.now_position.x,
            y: item.now_position.y,
            z: item.now_position.z,
          };

          var tween = new TWEEN.Tween(position).to(target, 2000);
          tween.onUpdate(() => {
            sphere.position.x = position.x;
            sphere.position.y = position.y;
            sphere.position.z = position.z;
          });
          tween.start();
          setInterval(() => {
            sphere.position.x = item.old_position.x;
            sphere.position.z = item.old_position.z;
            var position = {
              x: item.old_position.x,
              y: item.old_position.y,
              z: item.old_position.z,
            };
            var target = {
              x: item.now_position.x,
              y: item.now_position.y,
              z: item.now_position.z,
            };

            var tween = new TWEEN.Tween(position).to(target, 2000);
            tween.onUpdate(() => {
              sphere.position.x = position.x;
              sphere.position.y = position.y;
              sphere.position.z = position.z;
            });
            tween.start();
          }, 3000);
        }
      });
    },
    initText(name, api) {
      var oDiv = document.createElement("div");
      oDiv.id = name + api.id;
      oDiv.innerText = api.name;
      oDiv.style.cssText =
        "position:absolute;overflow:hidden;padding:5px;color:#FFFFFF;background-color:rgba(255,0,0,0.6);background-radius:0.05rem;font-size:15px";
      name === "oldPoint_"
        ? (oDiv.style.backgroundColor = "green")
        : name === "nowPoint_"
        ? (oDiv.style.backgroundColor = "orange")
        : null;
      if (api.type === 2) {
        oDiv.style.backgroundColor = "gray";
      }
      document.body.insertBefore(oDiv, document.body.lastChild);
      oDiv.className = "Point";
    },
    init() {
      this.container = document.createElement("div");
      this.sceneDom = document.querySelector("#scene");
      document.querySelector("#scene").appendChild(this.container);
      // 相机
      this.camera = new THREE.PerspectiveCamera(
        63,
        0.8 * (window.innerWidth / window.innerHeight),
        1,
        5000
      );
      this.camera.position.set(80, 250, 80);
      // 场景
      this.scene = new THREE.Scene();

      // this.scene.background = new THREE.TextureLoader().load("./bg.png");
      this.scene.background = new THREE.Color("rgb(37,56,79)");
      //测试网格
      var axes = new THREE.AxisHelper(50);
      this.scene.add(axes);
      var grid = new THREE.GridHelper(200, 20, 0xffffff, 0xffffff);
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      this.scene.add(grid);
      // 渲染器
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.shadowMap.enabled = true;
      this.container.appendChild(this.renderer.domElement);

      var light = new THREE.HemisphereLight(0xffffff, 0x444444);
      light.position.set(0, 200, 0);
      this.scene.add(light);

      var ambientLight = new THREE.AmbientLight(0xffffff); // soft white light
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      this.scene.add(ambientLight);
      // 尺寸变化
      window.addEventListener("resize", this.onWindowResize, false);
      // 导轨
      var OrbitControls = require("three-orbit-controls")(THREE);
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target.set(0, 0, 0);
      this.controls.maxPolarAngle = 1.5; //锁定视角
      //this.controls.minPolarAngle = 0.3;//上下翻转视角锁定
      this.controls.update();
    },
    _loadModal(id) {
      console.log(666, id);
      let that = this;
      let gruop = new THREE.Group();

      new THREE.ObjectLoader().load(
        `Scene_id${id}.json`,
        (obj) => {
          that.sceneFlag = false;
          //console.log('oooooooooooo',JSON.stringify(obj))
          //obj.name = 'Scene'+modal.name
          //obj.userData.desc = modal.desc
          this.load = true;
          gruop.add(obj);
          // add local ....
          // localStorage.setItem('hjbLoder',JSON.stringify(obj))
          gruop.name = "sceneSelect"; //场景名
          // gruop.position.set(0,13,0)
          //gruop.position.set(0,0,0)
          // if (pos) {
          //   gruop.position.set(Number(pos.x), Number(pos.z), Number(pos.y));
          // } else {
          //   gruop.position.set(0, 0, 0);
          // }
          if (id === 33 || id === 32) {
            gruop.position.set(-1422.367, 0, 601.337);
          }
          this.scene.add(gruop);
        },
        function (xhr) {
          that.sceneFlag = true;
          //console.log(xhr)
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          if (xhr.loaded / xhr.total === 1) {
            that.$notify({
              title: "成功",
              message: "模型加载成功",
              type: "success",
            });
          }
        }
      );
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    animate(t) {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
      this.render();
      TWEEN.update(t);
    },
    render() {
      if (document.querySelector("#scene")) {
        this.sceneDom.style.marginLeft =
          -(window.innerWidth - document.querySelector("#scene").clientWidth) +
          "px";
        this.sceneDom.style.marginTop = -50 + "px";
        this.scene.children.forEach((item) => {
          let halfWidth = window.innerWidth / 2;
          let halfHeight = window.innerHeight / 2;
          var APoint = document.querySelectorAll(".Point");
          APoint.forEach((itemPoint) => {
            if (itemPoint.id === item.name) {
              let vector = item.position.clone().project(this.camera);
              itemPoint.style.left = vector.x * halfWidth + halfWidth + "px";
              itemPoint.style.top =
                -vector.y * halfHeight + halfHeight - 20 + "px";
            }
          });
        });
      }
    },
    // 获取折线图数据
    getLineData(name) {
       var end = null;
      var start = null;

      if (this.bigObject.timeSel) {
        end = Date.parse(new Date(this.bigObject.timeSel[1]));
        start = Date.parse(new Date(this.bigObject.timeSel[0]));
      } else {
        end = Date.now();
        start = Date.now() - 30 * 24 * 60 * 60 * 1000;
      }

      const endValue = parseTime(end, "{y}-{m}-{d} {h}:{i}:{s}");
      const startValue = parseTime(start, "{y}-{m}-{d} {h}:{i}:{s}");
      getXyz({ did: this.boxdata.did, end, start }).then((res) => {
        this.bigObject = {
          name,
          timeSel: [new Date(startValue), new Date(endValue)],
          groupId: this.nowGroupId,
          data: res.data,
          switchButton: this.int,
          num: true,
        };
        this.lineShow = true;
      });


      // const end = Date.now();
      // const start = Date.now() - 90 * 24 * 60 * 60 * 1000;
      // const endValue = parseTime(Date.now(), "{y}-{m}-{d} {h}:{i}:{s}");
      // const startValue = parseTime(
      //   Date.now() - 90 * 24 * 60 * 60 * 1000,
      //   "{y}-{m}-{d} {h}:{i}:{s}"
      // );
      // getXyz({ did: this.boxdata.did, end, start }).then((res) => {
      //   this.bigObject = {
      //     name,
      //     timeSel: [startValue, endValue],
      //     groupId: this.nowGroupId,
      //     data: res.data,
      //     switchButton: this.int,
      //     num: true,
      //   };
      //   this.lineShow = true;
      // });
    },
    onKeyDown(event) {
      if (event.key === "o") {
        document.querySelector("#offsetBtn").style.top === "30%"
          ? (document.querySelector("#offsetBtn").style.top = "-40%")
          : ((document.querySelector("#offsetBtn").style.top = "30%"),
            this.getOffsetSceneData());
      }
    },
  },
  destroyed() {
    document.body.style.overflow = "auto";
    // window.location.reload();
  },
  beforeDestroy() {
    if (document.querySelectorAll(".Point")) {
      document.querySelectorAll(".Point").forEach((item) => {
        document.body.removeChild(item);
      });
    }
    if (document.querySelector("#scene")) {
      document.body.removeChild(document.querySelector("#scene"));
    }
  },
};
</script>
<style lang="scss" scope>
#scene {
  width: 100%;
  height: 100%;
  position: absolute;
  .bottom_btn {
    position: fixed;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 40%;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-flow: row;
    div {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: row;
      // border: 1px solid #2e5977;
      cursor: pointer;
      p {
        height: 40px;
        line-height: 40px;
        color: #fff;
      }
    }
    .gd_point {
      width: 25%;
      // background-color: rgb(46, 89, 136);
    }
    .pt_point {
      width: 25%;
      background-color: rgb(27, 119, 76);
      cursor: auto;
    }
    .jc_point {
      border: 1px solid #2e5977;
      width: 35%;
    }
  }
  .measure_info_big {
    position: fixed;
    top: 10%;
    right: 5%;
    width: 18%;
    .measure_info {
      background-color: rgba(68, 84, 111, 0.34);
      border: 1px solid #536685;
      -webkit-box-shadow: 0 32px 39px 12px rgba(19, 26, 37, 0.07);
      box-shadow: 0 32px 39px 12px rgba(19, 26, 37, 0.07);
      border-radius: 21px;
      letter-spacing: 3px;
      padding: 15px 20px;
      h1 {
        font-size: 15px;
        font-weight: 400;
        color: #b0bfeb;
        line-height: 23px;
        margin-bottom: 3%;
      }
      .button_box {
        margin-top: 5%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row;
        flex-flow: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        p {
          border-radius: 23px;
          width: 45%;
          background: rgba(0, 142, 232, 0.6);
          border: 1px solid #008ee8;
          text-align: center;
          font-size: 15px;
          font-weight: 400;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }
  }
  #offsetBtn {
    background-color: rgba(100, 148, 237, 0.699);
    position: absolute;
    left: 20%;
    font-size: 15px;
    // height:20%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    input {
      text-align: center;
    }
    transition: all 0.5s;
  }
}
.line-box {
  position: fixed;
  top: 20%;
  left: 25%;
  width: 60%;
  height: 68%;
  padding: 2%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 50px;
  z-index: 9999;
  .cha {
    text-align: right;
    font-size: 30px;
    margin: 0;
    cursor: pointer;
  }
  .cha_name {
    text-align: center;
    font-size: 16px;
    margin: 0;
  }
}
</style>
